<script setup lang="ts">
import type { CronItem } from '~/composables/cron'
import { CronBusKeyEnum, useCornFormat } from '~/composables/cron'
import { weekOptions } from '~/utils/constant'

const data = reactive<CronItem>({
  type: '?',
  intervalStart: 1,
  interval: 1,
  rangeStart: 1,
  rangeEnd: 7,
  nthWeek: 1, // 第几周
  dayOfWeek: 1, // 星期几
  lastDayOfWeek: 2, // 最后一个星期几
  specific: [1], // 指定
})

const formatStr = useCornFormat(data)
defineExpose({
  formatStr,
})

const { emit } = useEventBus(CronBusKeyEnum.WEEK)
const { on } = useEventBus(CronBusKeyEnum.DAY)
on((type) => {
  console.log('on day change:', type)
  if (type !== '?')data.type = '?'
})

const typeChange = (type: string) => {
  emit(data.type)
}
</script>

<template>
  <a-radio-group v-model:value="data.type" @change="typeChange">
    <a-radio class="item" value="*">
      每一周
    </a-radio>
    <a-radio class="item" value="?">
      不指定
    </a-radio>
    <a-radio class="item" value="interval">
      <span class="flex items-center">
        从<a-select v-model:value="data.intervalStart" class="mx-2 w-[100px]" show-search :options="weekOptions" @click.prevent />开始,
        每隔<a-input-number v-model:value="data.interval" class="mx-2" :min="1" :max="5" />周
      </span>
    </a-radio>
    <a-radio class="item" value="range">
      <span class="flex items-center">
        周期从<a-select v-model:value="data.rangeStart" class="mx-2 w-[100px]" show-search :options="weekOptions" @click.prevent />
        到<a-select v-model:value="data.rangeEnd" class="mx-2 w-[100px]" show-search :options="weekOptions" @click.prevent />
      </span>
    </a-radio>
    <a-radio class="item" value="nthWeekDayOfWeek">
      <span class="flex items-center">
        当月第<a-input-number v-model:value="data.nthWeek" class="mx-2" :min="0" :max="5" />周的
        <a-select v-model:value="data.dayOfWeek" class="mx-2 w-[100px]" show-search :options="weekOptions" @click.prevent />
      </span>
    </a-radio>
    <a-radio class="item" value="lastDayOfWeek">
      当月的最后一个星期
      <a-select v-model:value="data.lastDayOfWeek" class="mx-2 w-[100px]" show-search :options="weekOptions" @click.prevent />
    </a-radio>
    <a-radio class="item" value="specific">
      <div class="flex items-center">
        <span class="flex-shrink-0 mr-4">指定</span>
        <!-- <a-select v-model:value="data.specific" class="w-[200px]" :max-tag-count="1" mode="multiple" allow-clear :options="weekOptions" @click.prevent /> -->
        <a-checkbox-group v-model:value="data.specific" name="checkboxgroup" :options="weekOptions" />
      </div>
    </a-radio>
  </a-radio-group>
</template>

<style scoped lang="less">
.item {
@apply flex line-height-8 mb-2;
}
</style>
